<template>
    <!-- 风险清单 -->
    <div class="system sysStandard">
        <div class="bscroll">
            <ul class="header">
                <li class="currentLi">法规标准</li>
                <li @click="go2">规章制度</li>
                <li @click="go3">操作规程</li>
                <li @click="go4">事故案例</li>
            </ul>
            <vue-better-scroll class="wrapper"
                               ref="scroll0"
                               :scrollbar="scrollbarObj"
                               :pullDownRefresh="pullDownRefreshObj"
                               :pullUpLoad="pullUpLoadObj"
                               :startY="parseInt(startY)"
                               @pullingDown="onPullingDown"
                               @pullingUp="onPullingUp">
                <div class="bscroll-container">
                    <div class="systemDiv">
                        <div class="systemDiv_top">
                            <ul class="ul11">
                                <li class="clearfix">
                                    <span class="spa">标题/全文</span>
                                    <input class="titlesearch"
                                           v-model="search.title"
                                           placeholder="请输入关键词">

                                </li>
                                <li class="clearfix">
                                    <span class="spa">选择省份</span>
                                    <em @click="ProvincePropShow = true"
                                        v-if="!name2">全部
                                        <x-icon type="ios-arrow-right"
                                                size="20"></x-icon>
                                    </em>
                                    <em @click="ProvincePropShow = true"
                                        v-else>{{name2}}
                                        <x-icon type="ios-arrow-right"
                                                size="20"></x-icon>
                                    </em>
                                </li>
                                <li class="clearfix">
                                    <span class="spa">开始时间</span>
                                    <datetime v-model="search.startData"
                                              placeholder="请选择"
                                              format="YYYY-MM-DD"></datetime>
                                    <x-icon type="ios-arrow-right"
                                            size="20"></x-icon>
                                </li>
                                <li class="clearfix">
                                    <span class="spa">结束时间</span>
                                    <datetime v-model="search.endData"
                                              placeholder="请选择"
                                              format="YYYY-MM-DD"></datetime>
                                    <x-icon type="ios-arrow-right"
                                            size="20"></x-icon>
                                </li>
                            </ul>
                            <div class="queryBtn"
                                 @click="query">查询</div>
                        </div>
                    </div>
                    <h2></h2>
                    <ul class="destail"
                        v-if="nodata">
                        <li v-for="(item,index) in listArr"
                            :key="index"
                            @click="$router.push({path:'./systemDestail3',query:{item:encodeURIComponent(item.text)}})">
                            <p><img src=".../../../static/images/file_ico.png"
                                     alt=""> {{item.text}} </p>
                            <span style='float:left;margin-left:4px'>{{item.count}}</span>
                            <x-icon type="ios-arrow-right"
                                    size=""
                                    class="icon-white"></x-icon>
                        </li>
                    </ul>
                    <!-- <p v-if="!nodata" class="noDestail">暂无数据...</p> -->
                    <noData v-if="listArr == 0"></noData>
                </div>
            </vue-better-scroll>
        </div>

        <myMenu @clickBack="back"
                backPath='/Index/newEdit'></myMenu>
        <provinceProp :ProvincePropShow="ProvincePropShow"
                      :selectProvince="selectProvince"></provinceProp>
    </div>
</template>
<script>
import { Datetime, Radio } from 'vux'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import provinceProp from '@/commonComponents/provinceProp'
export default {
    components: {
        Radio,
        myMenu,
        Datetime,
        VueBetterScroll,
        provinceProp
    },
    data () {
        return {
            name1: '',
            name2: '',
            name3: '',
            listArr: [],
            nodata: true,
            search: {
                title: '',
                startData: '',
                endData: ''
            },
            parmas: {
                userId: '',
                data: {
                    departId: ''
                }
            },
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            listCount: 0, // 当前列表条数
            listAllCount: 0, // 总条数
            ProvincePropShow: false
        }
    },
    created () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid

        // if (window.sessionStorage.getItem('name2')) {
        //     this.name2 = window.sessionStorage.getItem('name2')
        //     this.parmas.data.SourceLevel = window.sessionStorage.getItem('name2')
        // }
        this.$vux.loading.show({
            text: '加载中...'
        })
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid

        this.pageIndex = 0
        this.onPullingDown()
    },
    methods: {
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('name3')
        },
        go2 () {
            window.sessionStorage.clear()
            this.$router.push('./system2')
        },
        go3 () {
            window.sessionStorage.clear()
            this.$router.push('./system3')
        },
        go4 () {
            window.sessionStorage.clear()
            this.$router.push('./system4')
        },
        change1 (value) {
            window.sessionStorage.setItem('time', value)
        },
        change2 (value) {
            window.sessionStorage.setItem('time', value)
        },

        query () {
            this.onPullingDown()
        },
        getList () {
            let listvar = {
                allowPaging: true,
                business: 'GetTypeCatalog',
                data: {
                    FileName: this.search.title,
                    area: this.name2 == '全国' ? '' : this.name2,
                    endDate: this.search.endData,
                    startDate: this.search.startData
                },
                pageIndex: 0,
                pageSize: 10000,
                tokenId: '',
                userId: this.parmas.userId
            }
            return this.$axiosAjax.getConfigJson(listvar)
        },
        // 模拟下拉刷新
        onPullingDown () {
            let that = this
            this.getList().then(res => {
                if (res.data.code === 0) {
                    that.listArr = res.data.data
                    that.listCount = that.listArr.length
                    that.listAllCount = res.data.count
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        // 模拟上拉 加载更多数据
        onPullingUp () {
            let that = this
            this.parmas.pageIndex++
            this.getList().then(res => {
                if (res.data.code === 0) {
                    that.listArr = that.listArr.concat(res.data.data)
                    that.listCount = that.listArr.length
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        selectProvince (item) {
            this.ProvincePropShow = false
            this.name2 = item
            this.parmas.data.SourceLevel = item
        }
    }
}
</script>
<style lang="less" scope>
.bscroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.sysStandard {
    font-size: 14px;
}
.titlesearch {
    flex: 1;
    text-align: right;
    color: #999;
    font-size: 14px;
}
.system {
    width: 100%;
    height: 100%;
    background-color: #ebeef3;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        background-color: #fff;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 24px;
            color: #999;
            font-size: 14px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 24px;
            color: #2269ff;
            font-size: 14px;
            border-bottom: 4px solid #2269ff;
        }
    }
    .systemDiv {
        width: 100%;
        background-color: #fff;
        margin-top: 10px;
        .systemDiv_top {
            width: 100%;
            padding-bottom: 1px;
            background-color: #fff;
            .ul11 {
                padding-left: 20px;
                li {
                    padding: 10px 20px 0 10px;
                    border-bottom: 1px solid #eee;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    // font-size: 16px;
                    display: flex;
                    justify-content: space-between;
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 14px;
                        right: 14px;
                    }
                    .spa {
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 140px;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        color: #333;
                    }
                    em {
                        float: right;
                        color: #999;
                        width: 200px;
                        height: 30px;
                        // font-size: 12px;
                        line-height: 30px;
                        text-align: right;
                        margin-right: 15px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 14px;
                        color: #999;
                        div {
                            float: right;
                            margin-left: 20px;
                            width: 26%;
                            position: relative;
                            text-align: right;
                            color: #999;
                            input {
                                width: 16px;
                                height: 16px;
                                position: absolute;
                                top: 6px;
                                left: 10px;
                                text-align: center;
                            }
                        }
                    }
                    .weui-cell {
                        // display: none;
                        padding: 0;
                    }
                    .weui-cell_access {
                        width: 220px;
                        height: 30px;
                    }
                    .vux-cell-value {
                        float: right;
                        padding-right: 10px;
                    }
                }
            }
            .queryBtn {
                height: 40px;
                line-height: 40px;
                left: 40px;
                margin: 25px auto;
                text-align: center;
                width: 200px;
                border-radius: 25px;
                background-color: #2269ff;
                letter-spacing: 4px;
                color: #fff;
            }
        }
    }
    h2 {
        width: 100%;
        height: 25px;
        line-height: 40px;
        text-align: right;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .destail {
        width: 100%;
        background-color: #fff;
        li {
            width: 100%;
            height: 56px;
            line-height: 56px;
            padding-left: 20px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            p {
                height: 56px;
                line-height: 56px;
                width: 290px;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                color: #333;
                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    float: left;
                    margin-right: 8px;
                    margin-top: 12px;
                }
            }
            span {
                line-height: 56px;
                font-size: 14px;
                color: #999;
            }
            .vux-x-icon {
                fill: #999;
                float: right;
                width: 20px;
                height: 20px;
                margin: 16px;
                margin-left: 0 !important;
                margin-right: 4px !important;
            }
        }
    }
    .noDestail {
        background-color: #fff;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
    }
}
</style>
<style>
.system .weui-cell:before {
    border-top: none;
}
.system .weui-cell_access .weui-cell__ft::after {
    display: none;
}
.system .vux-datetime-value {
    height: 30px;
    text-align: right;
    padding-right: 0;
}
.system .vux-datetime-value span {
    font-size: 14px;
    color: #999;
}
.system .vux-cell-placeholder {
    margin-right: 15px;
}
.system .vux-cell-placeholder,
.system .vux-cell-value {
    color: #999 !important;
}
</style>
